<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .container {
            flex-direction: row;
        }

        .left, .right {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .left > div, .right > div {
            flex: 1;
        }

    </style>
</head>
<body id="04_01jingyingnengli" data-title="经营能力">
<div class="container">
    <div class="left">
        <div class="left-top">
            <header class="pageHeader">
                <div class="inputGroup">
                    <label>平台：</label>
                    <div class="mySelect" id="jiaoyishichang">
                        <div class="myOption selected"><span class="text"></span><span class="icon"></span> </div>
                        <ul class="myOptionBox">
                            <li class="myOption selected">鲁金宝</li>
                            <li class="myOption">鲁金宝2</li>
                            <li class="myOption">鲁金宝3</li>
                        </ul>
                    </div>
                </div>
            </header>
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>资金使用情况</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec001_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left-bottom">
            <div class="chartBox ec002">
                <div class="chartTitle">
                    <h3>社会责任(单笔贷款，所在地区人均GDP)</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="right-top">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>各类比重</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec003_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-middle">
            <div class="chartBox ec004">
                <div class="chartTitle">
                    <h3>营业费用率</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec004_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-bottom">
            <div class="chartBox ec005">
                <div class="chartTitle">
                    <h3>信贷员数量</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec005_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];

    $(function () {
        var ec001 = echarts.init($("#ec001_currentCompetitiveness")[0]);
        ec001.setOption(opt_bar_vertical);
        ec001.setOption(opt_line);
        ec001.setOption({
            grid:{
                top:'20%',
                bottom:'8%'
            },
            xAxis: {
                name: '时间',
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            yAxis: {
                name: '金额/万元'
            },
            series: [
                {
                    name: '当月平均',
                    type: 'bar',
                    data: [2, 5, 5, 3, 2, 6, 4, 7, 8, 8, 2, 3],
                    barWidth: "60%"
                },
                {
                    name: '当月平均贷款余额',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 3, 4, 2, 1, 4, 2, 5, 5, 2, 1, 2]
                }
            ]
        });

        var ec002 = echarts.init($("#ec002_currentCompetitiveness")[0]);
        ec002.setOption(opt_line);
        ec002.setOption({
            grid:{
                top:'20%',
                bottom:'15%'
            },
            xAxis: {
                name: '时间',
                boundaryGap: false,
                data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            yAxis: {
                name: '金额/万元',
                type: 'value',
            },
            series: [
                {
                    name: '平均单笔贷款',
                    type: 'line',
                    symbol: 'circle',
                    data: [2, 5, 5, 3, 2, 6, 4, 7, 8, 8, 2, 3],
                    areaStyle: lineAreaStyle(0)
                },
                {
                    name: '所在地人均GDP',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 3, 4, 5, 6, 7, 2, 5, 5, 2, 1, 2],
                    areaStyle: lineAreaStyle(1)
                }
            ]
        });
        var ec003 = echarts.init($("#ec003_currentCompetitiveness")[0]);
        ec003.setOption(opt_line);
        ec003.setOption({
            grid:{
                top:'34%',
                bottom:'17%'
            },
            xAxis: {
                name: '时间',
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            yAxis: {
                name: '金额/万元',
            },
            series: [
                {
                    name: '贷款余额',
                    type: 'bar',
                    data: [2, 5, 5, 3, 2, 6, 4, 7, 8, 8, 2, 3],
                    barWidth: "60%"
                },
                {
                    name: '小微贷款余额',
                    type: 'line',
                    symbol: 'circle',
                    data: [0, 3, 1, 6, 1, 4, 2, 7, 5, 2, 8, 2],
                },
                {
                    name: '三农贷款余额',
                    type: 'line',
                    symbol: 'circle',
                    data: [3, 5, 2, 3, 2, 3, 3, 5, 6, 8, 9, 3],
                    barWidth: "60%"
                },
                {
                    name: '委托贷款余额',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 3, 4, 2, 1, 4, 2, 4, 5, 2, 1, 9],
                },
                {
                    name: '股东及关系人贷款余额',
                    type: 'line',
                    symbol: 'circle',
                    data: [6, 3, 4, 8, 1, 2, 2, 5, 5, 2, 1, 2],
                }

            ]
        });

        var ec004 = echarts.init($("#ec004_currentCompetitiveness")[0]);
        ec004.setOption(opt_line);
        ec004.setOption({
            legend:{
                show:false
            },
            grid:{
                top:'20%',
                bottom:'18%'
            },
            xAxis: {
                name: '时间',
                data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            yAxis: {
                name: '占比/%',
            },
            series: [
                {
                    name: '当月平均',
                    type: 'line',
                    symbol: 'circle',
                    data: [2, 5, 5, 3, 2, 6, 4, 7, 8, 8, 2, 3],
                    areaStyle: lineAreaStyle(0)
                }
            ]
        });
        var ec005 = echarts.init($("#ec005_currentCompetitiveness")[0]);
        ec005.setOption(opt_line);
        ec005.setOption({
            legend:{
                show:false
            },
            grid:{
                top:'20%',
                bottom:'18%'
            },
            xAxis: {
                name: '时间',
                data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            yAxis: {
                name: '金额/万元',
            },
            series: [
                {
                    name: '当月平均',
                    type: 'line',
                    symbol: 'circle',
                    data: [2, 5, 5, 3, 2, 6, 4, 7, 8, 8, 2, 3],
                    areaStyle: lineAreaStyle(0)
                }
            ]
        });
        //本页所有图表
        allCharts = [ec001, ec002,ec003,ec004,ec005];

    });


</script>
</body>
</html>
